<template>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h2 class="sub-header">添加信息</h2>
    <div class="form-group" id="radio">
      <h3>姓名</h3>
      <br>
      <input type="radio" name="name" v-model="student.name" id="fx"  value="冯希">
      <label for="fx">冯希</label><br>
      <input type="radio" name="name" v-model="student.name" id="yx" value="杨鑫">
      <label for="yx">杨鑫</label><br>
      <input type="radio" name="name" v-model="student.name" id="cxp" value="陈细盼">
      <label for="cxp">陈细盼</label><br>
      <input type="radio" name="name" v-model="student.name" id="dl" value="杜拉">
      <label for="dl">杜拉</label><br>
    </div>
    <div class="form-group">
     <h3>模板名称</h3>
      <input
        class="form-control"
        type="text"
        v-model="student.hobbies"
        id
        name="hobbies"
        placeholder="请输入模板名称"
      >
    </div>
    <div class="form-group">
     <h3>域名</h3>
      <input
        class="form-control"
        type="text"
        v-model="student.www"
        id
        name="www"
        placeholder="请输入域名"
      >
    </div>
    <router-link
      @click.native="doSubmit"
      :to="toUrl"
      class="btn btn-primary"
    >提交</router-link>
    <router-link
      to="/students"
      class="btn btn-danger"
    >取消</router-link>
    <button @click="mk" class="btn btn-success pull-right">生成.md格式</button>
    <!--<button @click="md" style="margin-right:10px"  class="btn btn-success pull-right">生成名称</button>-->
    <div v-show="scmd" class="mkd">
      <div  v-for="student in students" :key="student.id">| {{ student.name }} | {{ student.www ? student.www:"不能用" }} | {{ student.hobbies }} |</div>
    </div>
    <div v-show="scname"  class="mkd">
      <div  v-for="student in students" :key="student.id">{{ student.hobbies }}</div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
  props:["students"],
  data() {
    return {
      student:{name:'杨鑫'},
      scmd:false,
      scname:false,
      toUrl:'/students'
    };
  },
  methods: {
    mk(){
      this.scmd = !this.scmd
    },
    md(){
      this.scname = !this.scname
    },
    doSubmit(e) {

      if (!this.student.name) {
        //this.toUrl = "/newstudent"
        Toast({
          message: "姓名不能为空！",
          position: "middle",
          duration: 2000,
          iconClass: 'glyphicon glyphicon-remove'
        });
        return false;
      }
      if (!this.student.hobbies) {
        //this.toUrl = "/newstudent"
        Toast({
          message: "模板名称不能为空！",
          position: "middle",
          duration: 2000,
          iconClass: 'glyphicon glyphicon-remove'
        });
        return false;
      }else {
        //this.toUrl = "/students"
        this.student.name = String(this.student.name)
        var formData = JSON.stringify(this.student);
        this.$http
          .post("/students/new", formData)
          .then(response => {
            this.$parent.getStudents();
          })
          .catch(function() {
            console.log("服务器异常！");
          });
        Toast({
          message: "添加信息成功！",
          position: "middle",
          duration: 2000,
          iconClass: 'glyphicon glyphicon-ok'
        });      this.student.hobbies = ""
      }
    }
  }
};
</script>
<style>
#radio label{
  font-size: 16px;
  margin-bottom: 10px;
}
#radio input{
  margin-bottom: 10px;
}
.mkd {
  margin-top: 50px;
  padding: 20px;
  border: 1px dashed #999
}
.mkd p{
  margin:0
}
</style>
